<template>
	<view>
		<!-- 好友 -->

		<!-- 导航 -->
		<view class="flex align-center py-2" style="height: 100rpx;">
			<view class="flex flex-1 align-center justify-center " v-for="(item,index) in tabBars" :key="index"
				:class="index === tabIndex? 'font-lg text-main font-weight-bold' : 'font-md'" @click="changeTab(index)">
				{{item.name}} <text v-if="item.num>0" class="ml-2">{{item.num}}</text>
			</view>
		</view>
		<!-- 好友列表 -->
		<swiper :duration="200" :style="'height:'+ scrollH +'px'" @change="onChangeTab" :current="tabIndex">
			<swiper-item v-for="(item,index) in newList " :key="index">
				<scroll-view scroll-y="true" :style="'height:'+ scrollH +'px'" @scrolltolower="loadmore(index)">
					<template v-if="item.list.length>0">
						<block v-for="(item2,index2) in item.list" :key="index2">
							<user-list :item="item2" :index="index2"></user-list>
						</block>
						<!-- 上拉加载 -->
						<load-more :loadmore="item.loadmore"></load-more>
					</template>

					<!-- 没有任何数据时候的处理 -->
					<template v-else>
						<!-- 404页面 -->
						<nothing></nothing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const demo=[{
		avatar:'/static/tabbar/微信图片_20240418093242.jpg',
		username:'鞠了个攻',
		gender:1,
		age:18,
		isFollow:false
	},
	{
		avatar:'/static/jjy9.jpg',
		username:'鞠婧祎应援会官微',
		gender:1,
		age:19,
		isFollow:true
	},
	{
		avatar: '/static/tabbar/jjy3.jpg',
		username:'TNB_k.鞠婧祎',
		gender:2,
		age:20,
		isFollow:true
	}]
	import userList from '@/components/user-list/user-list.vue'
	export default {
		components:{
			userList
		},
		data() {
			return {
				//列表区域高度
				scrollH: 600,
				tabIndex: 0,
				tabBars: [{
						name: "互关",
						num: 9
					},
					{
						name: "关注",
						num: 587
					},
					{
						name: "粉丝",
						num: 1
					}
				],
				newList: []
			}
		},
		onLoad() {
			//加载时同时获取设备信息
			uni.getSystemInfo({
				success: (res) => {
					//px 此处需要把得到的rpx转换成px uni.upx2px
					this.scrollH = res.windowHeight - uni.upx2px(101)
				}
			})
			this.getData()
		},
		// 监听点击搜索框事件
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '/pages/search/search'
			})
		},
		//点击右侧取消 实现返回功能
		onNavigationBarButtonTap() {
			uni.navigateBack({
				delta: 1
			})
		},
		methods: {
			//切换选项卡
			changeTab(index) {
				this.tabIndex = index
			},
			getData() {
				const arr = []
				for (let i = 0; i < this.tabBars.length; i++) {
					let obj = {
						//1 上拉加载 2 加载中 3 没有更多
						loadmore: "数据加载中",
						list: []
					}
					if (i < 2) {
						obj.list = demo
					}
					arr.push(obj)
				}
				this.newList = arr
			},
			//监听滑动
			onChangeTab(e) {
				// console.log(e.detail.current);
				this.changeTab(e.detail.current)
			},
			//上拉加载事件
			loadmore(index) {
				//获取当前列表
				let item = this.newList[index]
				//修改当前列表的加载状态
				item.loadmore = "加载中..."
				//模拟数据更新请求
				setTimeout(() => {
					//利用定时器，模拟瀑布流效果
					item.list = [...item.list, ...item.list]
					//恢复加载状态
					item.loadmore = '上拉加载更多'
				}, 1000)
			}
		}
	}
</script>

<style>

</style>